<template>
    <BaseCard></BaseCard>
    <BaseCard>
        <div style="margin-bottom: var(--card-space);">
            <el-button type="primary" @click="permissionRef?.openDialog()">添加权限</el-button>
        </div>
        <el-table :data="permissionData.rows" row-key="_id"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }">
            <el-table-column label="名称" prop="title"></el-table-column>
            <el-table-column label="图标" prop="icon">
                <template #default="{ row }">
                    <el-icon v-if="row.icon">
                        <component :is="(allIcons as any)[row.icon]"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column label="类型">
                <template #default="{ row }">
                    <span v-if="row.type == 'menu'">菜单</span>
                    <span v-if="row.type == 'button'">按钮</span>
                </template>
            </el-table-column>
            <el-table-column label="路由路径" prop="route_path"></el-table-column>
            <el-table-column label="组件路径" prop="component_path"></el-table-column>
            <el-table-column label="顺序" width="100" prop="order"></el-table-column>
            <el-table-column label="是否显示">
                <template #default="{ row }">
                    <el-switch v-model="row.is_show" :active-value="1" :inactive-value="0" active-text="显示"
                        inactive-text="隐藏" inline-prompt></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" link @click="permissionRef?.openDialog(row)">编辑</el-button>
                    <el-button type="danger" link @click="onDelete(row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </BaseCard>

    <PermissionForm ref="permissionRef" @findPermission="findPermission" />
</template>

<script setup lang="ts">
import * as allIcons from '@element-plus/icons-vue'
import { useFindData } from '@/composables/findData';
import { onMounted, useTemplateRef } from 'vue';
import PermissionForm from './PermissionForm.vue';
import { deletePermissionApi } from '@/api/permission';

const { findPermissionAsync, permissionData } = useFindData();

const permissionRef = useTemplateRef('permissionRef');

onMounted(() => {
    findPermission()
})


function findPermission() {
    findPermissionAsync({
        creator: 'jianglan'
    });
}

function onDelete(_id: string) {
    ElMessageBox.confirm(
        '权限数据删除后不可恢复，确认删除?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deletePermissionApi({
                _id, creator: 'jianglan'
            })
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功!');
                        findPermission();
                    } else {
                        ElMessage.error(res.message);
                    }
                })
        })
        .catch(() => { })
}

</script>

<style scoped></style>